{% extends "base.html" %}

{% set current_menu = 'project' %}
{% set current_page = 'progress_tracking' %}

{% block title %}进度跟踪{% endblock %}
{% block page_title %}{% endblock %}

{% block content %}
<div class="container mx-auto">
    <!-- 面包屑导航 -->
    <nav class="text-sm breadcrumbs mb-6">
        <ol class="flex items-center space-x-2">
            <li><a href="{{ url_for('main.home') }}" class="text-gray-500 hover:text-gray-700">首页</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li><a href="{{ url_for('project.list_projects') }}" class="text-gray-500 hover:text-gray-700">项目管理</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li class="text-gray-700">进度跟踪</li>
        </ol>
    </nav>

    <!-- 业务场景标签页 -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="flex justify-between items-center px-6 py-3 border-b border-gray-200">
            <nav class="-mb-px flex">
                <button class="tab-button py-2 px-4 border-b-2 font-medium text-sm border-blue-500 text-blue-600" data-tab="dashboard">
                    工作台
                </button>
                <button class="tab-button py-2 px-4 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="milestones">
                    里程碑管理
                </button>
                <button class="tab-button py-2 px-4 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="reports">
                    周报中心
                </button>
            </nav>
            <div class="flex space-x-2">
                <button id="refreshBtn" class="text-gray-600 hover:text-blue-600 hover:bg-blue-50 p-1.5 rounded transition-colors duration-200" title="刷新数据">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                    </svg>
                </button>
                <button id="exportBtn" class="text-gray-600 hover:text-green-600 hover:bg-green-50 p-1.5 rounded transition-colors duration-200" title="导出报告">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- 工作台视图 -->
    <div id="dashboard-tab" class="tab-content">
        <!-- 个人工作概览 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <div class="bg-white rounded-lg shadow p-4 border-l-4 border-blue-500">
                <h3 class="text-lg font-semibold text-gray-700">我的项目</h3>
                <p class="text-3xl font-bold text-blue-600">{{ dashboard_data.my_projects }}</p>
                <p class="text-sm text-gray-500">负责的项目数量</p>
            </div>
            <div class="bg-white rounded-lg shadow p-4 border-l-4 border-green-500">
                <h3 class="text-lg font-semibold text-gray-700">已完成</h3>
                <p class="text-3xl font-bold text-green-600">{{ dashboard_data.completed_projects }}</p>
                <p class="text-sm text-gray-500">已完成的项目</p>
            </div>
            <div class="bg-white rounded-lg shadow p-4 border-l-4 border-yellow-500">
                <h3 class="text-lg font-semibold text-gray-700">进行中</h3>
                <p class="text-3xl font-bold text-yellow-600">{{ dashboard_data.total_projects - dashboard_data.completed_projects }}</p>
                <p class="text-sm text-gray-500">进行中的项目</p>
            </div>
            <div class="bg-white rounded-lg shadow p-4 border-l-4 border-red-500">
                <h3 class="text-lg font-semibold text-gray-700">风险项目</h3>
                <p class="text-3xl font-bold text-red-600">{{ dashboard_data.at_risk_projects }}</p>
                <p class="text-sm text-gray-500">需要关注的项目</p>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <!-- 项目健康度分布 -->
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold mb-4">项目健康度分布</h3>
                <div class="h-96 relative">
                    <div id="healthChart" style="width: 100%; height: 100%; min-height: 400px;"></div>
                </div>
            </div>

            <!-- 即将到来的里程碑 -->
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold mb-4">即将到来的里程碑</h3>
                <div class="h-64 overflow-y-auto">
                    {% if dashboard_data.upcoming_milestones %}
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">里程碑</th>
                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目</th>
                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">剩余天数</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            {% for milestone in dashboard_data.upcoming_milestones %}
                            <tr>
                                <td class="px-4 py-2 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ milestone.name }}</div>
                                </td>
                                <td class="px-4 py-2 whitespace-nowrap">
                                    <a href="/progress/tracking?project_id={{ milestone.project_id }}" class="text-sm text-blue-600 hover:text-blue-900">
                                        {{ milestone.project_name }}
                                    </a>
                                </td>
                                <td class="px-4 py-2 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                        {% if milestone.days_remaining <= 1 %}bg-red-100 text-red-800
                                        {% elif milestone.days_remaining <= 3 %}bg-yellow-100 text-yellow-800
                                        {% else %}bg-green-100 text-green-800
                                        {% endif %}">
                                        {{ milestone.days_remaining }}天
                                    </span>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <p class="text-gray-500 text-center mt-4">暂无即将到来的里程碑</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 最近周报 -->
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold mb-4">最近周报</h3>
            <div class="overflow-x-auto">
                {% if dashboard_data.recent_reports %}
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">填报人</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">工时</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">工作内容</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for report in dashboard_data.recent_reports %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ report.week_start_date }} - {{ report.week_end_date }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ report.user_name }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <a href="/progress/tracking?project_id={{ report.project_id }}" class="text-sm text-blue-600 hover:text-blue-900">
                                    {{ report.project_name }}
                                </a>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ report.weekly_work_hours }}小时</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900">{{ report.weekly_work_content }}</div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <p class="text-gray-500 text-center mt-4">暂无最近周报</p>
                {% endif %}
            </div>
        </div>
    </div>

    

    <!-- 里程碑管理视图 -->
    <div id="milestones-tab" class="tab-content hidden">
        <!-- 里程碑概览 -->
        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold">里程碑概览</h3>
                {% if selected_project %}
                <button onclick="document.getElementById('milestoneModal').classList.remove('hidden')" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    创建里程碑
                </button>
                {% endif %}
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">里程碑名称</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">所属项目</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">截止日期</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for project in projects %}
                            {% for milestone in project.milestones %}
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm font-medium text-gray-900">{{ milestone.name }}</div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <a href="/progress/tracking?project_id={{ project.id }}&tab=projects" class="text-sm text-blue-600 hover:text-blue-900">
                                        {{ project.name }}
                                    </a>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ milestone.due_date|format_date }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                                        {% if milestone.status == '未开始' %}bg-gray-100 text-gray-800
                                        {% elif milestone.status == '进行中' %}bg-yellow-100 text-yellow-800
                                        {% elif milestone.status == '已完成' %}bg-green-100 text-green-800
                                        {% elif milestone.status == '已延期' %}bg-red-100 text-red-800
                                        {% endif %}">
                                        {{ milestone.status }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <a href="/progress/tracking?project_id={{ project.id }}&tab=projects" class="text-blue-600 hover:text-blue-900">
                                        查看项目
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 周报中心视图 -->
    <div id="reports-tab" class="tab-content hidden">
        <!-- 周报概览 -->
        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold">周报中心视图</h3>
                {% if selected_project %}
                <button onclick="document.getElementById('weeklyReportModal').classList.remove('hidden')" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                    填报周报
                </button>
                {% endif %}
            </div>
            
            {% if selected_project and selected_project.weekly_reports %}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">周开始日期</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">周结束日期</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">填报人</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">工作时长</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">工作内容</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">下周计划</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">遇到问题</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for report in selected_project.weekly_reports|sort(attribute='week_start_date', reverse=true) %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ report.week_start_date|format_date }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ report.week_end_date|format_date }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ report.user.name }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ report.weekly_work_hours }}小时</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900">{{ report.weekly_work_content }}</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900">{{ report.next_week_plan }}</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900">{{ report.weekly_issues }}</div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center py-8">
                <p class="text-gray-500 mb-4">
                    {% if selected_project %}
                        该项目暂无周报记录
                    {% else %}
                        请先选择一个项目以查看周报
                    {% endif %}
                </p>
                {% if selected_project %}
                <button onclick="document.getElementById('weeklyReportModal').classList.remove('hidden')" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                    填报周报
                </button>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 周报填报模态框 -->
<div id="weeklyReportModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <h3 class="text-lg font-semibold mb-4">填报周报</h3>
            <form action="/weekly_report/create/{{ selected_project.id }}" method="post">
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="week_start_date">
                        周开始日期（周一）
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                           id="week_start_date" name="week_start_date" type="date" value="{{ today_date }}" required>
                    <p class="text-xs text-gray-500 mt-1">系统将自动计算周结束日期（周日）</p>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="weekly_work_hours">
                        本周工作时长
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                           id="weekly_work_hours" name="weekly_work_hours" type="number" step="0.5" min="0" max="168" required>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="weekly_work_content">
                        本周工作内容
                    </label>
                    <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                              id="weekly_work_content" name="weekly_work_content" rows="3" required></textarea>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="next_week_plan">
                        下周工作计划
                    </label>
                    <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                              id="next_week_plan" name="next_week_plan" rows="3"></textarea>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="weekly_issues">
                        本周遇到问题
                    </label>
                    <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                              id="weekly_issues" name="weekly_issues" rows="3"></textarea>
                </div>
                <div class="flex items-center justify-between">
                    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" 
                            type="submit">
                        提交
                    </button>
                    <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" 
                            type="button" onclick="document.getElementById('weeklyReportModal').classList.add('hidden')">
                        取消
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 里程碑创建模态框 -->
<div id="milestoneModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <h3 class="text-lg font-semibold mb-4">创建里程碑</h3>
            <form action="/milestones/create/{{ selected_project.id }}" method="post">
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="name">
                        里程碑名称
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                           id="name" name="name" type="text" required>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="description">
                        里程碑描述
                    </label>
                    <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                              id="description" name="description" rows="3"></textarea>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="due_date">
                        截止日期
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
                           id="due_date" name="due_date" type="date" required>
                </div>
                <div class="flex items-center justify-between">
                    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" 
                            type="submit">
                        创建
                    </button>
                    <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" 
                            type="button" onclick="document.getElementById('milestoneModal').classList.add('hidden')">
                        取消
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 引入ECharts -->
<script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>

<script>
    // 标签页切换功能
    document.addEventListener('DOMContentLoaded', function() {
        // 获取标签按钮元素
        const tabButtons = document.querySelectorAll('.tab-button');
        
        // 定义switchTab函数
        function switchTab(tabName) {
            // 隐藏所有标签页内容
            const tabContents = document.querySelectorAll('.tab-content');
            tabContents.forEach(content => {
                content.classList.add('hidden');
            });
            
            // 重置所有标签按钮样式
            tabButtons.forEach(button => {
                button.classList.remove('border-blue-500', 'text-blue-600');
                button.classList.add('border-transparent', 'text-gray-500');
            });
            
            // 显示选中的标签页内容
            const tabElement = document.getElementById(tabName + '-tab');
            if (tabElement) {
                tabElement.classList.remove('hidden');
                
                // 高亮选中的标签按钮
                const activeButton = document.querySelector(`[data-tab="${tabName}"]`);
                if (activeButton) {
                    activeButton.classList.remove('border-transparent', 'text-gray-500');
                    activeButton.classList.add('border-blue-500', 'text-blue-600');
                }
            }
        }
        
        // 获取当前标签页参数
        const urlParams = new URLSearchParams(window.location.search);
        const tabParam = urlParams.get('tab');
        
        // 如果有tab参数且不是已删除的projects标签页，则切换到对应标签页
        if (tabParam && tabParam !== 'projects') {
            switchTab(tabParam);
        } else if (tabParam === 'projects') {
            // 如果URL参数是projects，则重定向到dashboard
            const url = new URL(window.location);
            url.searchParams.delete('tab');
            window.history.replaceState({}, '', url);
        }
        
        // 标签页点击事件
        tabButtons.forEach(button => {
            button.addEventListener('click', function() {
                const tabName = this.getAttribute('data-tab');
                switchTab(tabName);
                
                // 更新URL参数
                const url = new URL(window.location);
                if (tabName === 'dashboard') {
                    url.searchParams.delete('tab');
                } else {
                    url.searchParams.set('tab', tabName);
                }
                window.history.replaceState({}, '', url);
            });
        });
        
        // 绘制健康度分布图表 - 使用延迟初始化确保DOM完全加载
        setTimeout(function() {
            console.log('开始初始化健康度图表...');
            const healthCtx = document.getElementById('healthChart');
            console.log('图表容器元素:', healthCtx);
            
            if (healthCtx) {
                console.log('容器尺寸:', healthCtx.offsetWidth, 'x', healthCtx.offsetHeight);
                const healthChart = echarts.init(healthCtx);
                console.log('健康度图表初始化成功');
                
                // 确保容器高度正确应用
                const healthChartContainer = document.getElementById('healthChart');
                console.log('图表容器计算高度:', healthChartContainer.clientHeight);
                
                // 获取健康度数据
                const healthData = {
                    excellent: {{ dashboard_data.project_health_distribution.excellent if dashboard_data.project_health_distribution else 0 }},
                    good: {{ dashboard_data.project_health_distribution.good if dashboard_data.project_health_distribution else 0 }},
                    average: {{ dashboard_data.project_health_distribution.average if dashboard_data.project_health_distribution else 0 }},
                    at_risk: {{ dashboard_data.project_health_distribution.at_risk if dashboard_data.project_health_distribution else 0 }}
                };
                console.log('健康度数据:', healthData);
                
                // 动态计算合适的图表尺寸和配置
                const containerHeight = healthChartContainer.clientHeight;
                const containerWidth = healthChartContainer.clientWidth;
                const isSmallScreen = containerWidth < 400;
                
                const healthOption = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'horizontal',
                        bottom: 20,
                        left: 'center',
                        data: ['优秀', '良好', '一般', '风险'],
                        textStyle: {
                            fontSize: isSmallScreen ? 10 : 12
                        },
                        itemWidth: isSmallScreen ? 12 : 16,
                        itemHeight: isSmallScreen ? 12 : 16,
                        itemGap: isSmallScreen ? 10 : 15,
                        padding: [5, 10]
                    },
                    series: [
                        {
                            name: '项目健康度',
                            type: 'pie',
                            // 调整圆环大小以适应容器
                            radius: ['40%', '70%'],
                            center: ['50%', '40%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 5,
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: healthData.excellent, name: '优秀', itemStyle: { color: '#10B981' } },
                                { value: healthData.good, name: '良好', itemStyle: { color: '#3B82F6' } },
                                { value: healthData.average, name: '一般', itemStyle: { color: '#F59E0B' } },
                                { value: healthData.at_risk, name: '风险', itemStyle: { color: '#EF4444' } }
                            ]
                        }
                    ]
                };
                
                console.log('图表配置:', healthOption);
                console.log('容器宽高:', containerWidth, 'x', containerHeight);
                
                healthChart.setOption(healthOption);
                console.log('图表配置已应用');
                
                // 强制图表重绘以确保正确显示
                setTimeout(() => {
                    healthChart.resize();
                    console.log('图表强制重绘完成');
                }, 100);
                
                // 响应式调整 - 使用防抖优化
                let resizeTimer = null;
                window.addEventListener('resize', function() {
                    clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(function() {
                        // 获取调整后的容器尺寸
                        const newWidth = healthChartContainer.clientWidth;
                        const newHeight = healthChartContainer.clientHeight;
                        const newIsSmallScreen = newWidth < 400;
                        
                        // 更新配置以适应新尺寸
                        healthChart.setOption({
                            legend: {
                                textStyle: {
                                    fontSize: newIsSmallScreen ? 10 : 12
                                },
                                itemWidth: newIsSmallScreen ? 12 : 16,
                                itemHeight: newIsSmallScreen ? 12 : 16,
                                itemGap: newIsSmallScreen ? 10 : 15
                            }
                        });
                        
                        healthChart.resize();
                        console.log('图表已调整大小:', newWidth, 'x', newHeight);
                    }, 100);
                });
            } else {
                console.error('找不到健康度图表容器元素');
            }
        }, 500); // 延迟500毫秒初始化
        
        // 刷新按钮功能
        document.getElementById('refreshBtn').addEventListener('click', function() {
            window.location.reload();
        });
        
        // 导出按钮功能
        document.getElementById('exportBtn').addEventListener('click', function() {
            // 这里可以实现导出功能
            showFlashMessage('导出功能开发中...', 'info');
        });
    });
</script>

{% endblock content %}